<!DOCTYPE html>
<html lang="zh">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body> 
    
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    /** * 弹出框 * {type: "alert", title: "title", buttonText: "buttonText", callback: "callback"} * {type: "confirm", title: "title", okButtonText: "okButtonText", cancleButtonText: "cancleButtonText", okCallback: "okCallback", cancleCallback: "cancleCallback"} */
    /*
     *  type：类型，可为alert或者confirm
     *  title： 提示框内容
     *  type为alert时可选参数：
     *  buttonText:按钮内容，可选，默认为确定
     *  callback:点击俺就调用函数，可选
     *  type为confirm时可选参数：
     *  okButtonText: 确认按钮文字，默认确定，可选
     *  cancleButtonText：取消按钮文字，默认取消，可选
     *  okCallback：点击确认按钮触发事件，可选
     *  cancleCallback: 点击取消按钮触发事件，可选
     */
    $.extend({
        showDialog: function (obj) {
            var type = obj.type || "alert";
            var title = obj.title;
            var content =
                "<div id='pop-div' style='position: fixed; z-index:999; top: 0; left: 0;width:100%; height:100%; background-color: rgba(0 ,0, 0, 0.2)'>";
            content +=
                "<div style='position:relative; width: 90%; max-width: 400px; height: 140px;margin: 0 auto; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);transform: translateY(-50%);background-color: #fafafa;text-align: center;font-size: 16px'>";
            content +=
                "<div style='height: 90px; border-bottom: 1px solid #E1E1E1;line-height: 90px; box-sizing: border-box'>" +
                title + "</div>";
            var button = "<div style='width: 100%; height: 40px;'>";
            switch (type) {
                case "confirm":
                    var okButtonText = obj.okButtonText || "确定";
                    var cancleButtonText = obj.cancleButtonText || "取消";
                    var button =
                        "<span style='display:inline-block; width: 50%;height: 50px;border-right: 1px solid #E1E1E1; box-sizing: border-box;text-align: center;line-height: 50px;font-size: 16px' id='cancle'>" +
                        cancleButtonText +
                        "</span><span style='display:inline-block; width: 50%;height: 50px;text-align: center;line-height: 50px; color: orange;font-size: 16px' id='confirm'>" +
                        okButtonText + "</span>";
                    break;
                case "alert":
                default:
                    var buttonText = obj.buttonText || "确定";
                    var button =
                        "<span style='display:inline-block; width: 100%;line-height: 50px;color: orange;font-size: 16px' id='alert'>" +
                        buttonText + "</span>";
                    break;
            }
            button += "</div>";
            content += button;
            content += "</div>";
            content += "</div>";
            $("body").append(content);
            if (type == 'confirm') {
                var okCallback = obj.okCallback || undefined;
                var cancleCallback = obj.cancleCallback || undefined;
                $("#confirm").on("click", function () {
                    $("#pop-div").remove();
                    if (typeof okCallback == "function") {
                        okCallback();
                    }
                });
                $("#cancle").on("click", function () {
                    $("#pop-div").remove();
                    if (typeof cancleCallback == "function") {
                        cancleCallback();
                    }
                });
            } else if (type == 'alert') {
                var callback = obj.callback || undefined;
                $("#alert").click(function () {
                    $("#pop-div").remove();
                    if (typeof callback == 'function') {
                        callback();
                    }
                });
            }
        }
    });
    $.showDialog({
        title: "这只是一个测试",
        type: "confirm",
        okButtonText: "点我",
        buttonTitle: "",
        okCallback: function () {
            console.log("fgdfhfghfgjgf")
        }
    });
</script>

</html>